import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQml.Models 2.15


Popup {
    id: root
    implicitWidth: 272
    implicitHeight: contentRect.height + 10
    closePolicy: Popup.CloseOnEscape
    readonly property color back_color: "#3d434d"
    property string title: "Non"
    property string description: "Non"

    function close(){
        showTimer.stop()
        root.visible = false
    }

    function show(){
        showTimer.start()
    }

    Timer{
        id: showTimer
        interval: 500
        repeat: false
        running: false
        onTriggered: {
            root.visible = true
        }
    }

    background: Rectangle{
        color: "transparent"

        Rectangle {
            id: arrow
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.topMargin: 30
            implicitWidth: 8
            implicitHeight: 14
            color: "transparent"

            Canvas {
                id: arrowCanvas
                anchors.fill: parent

                onPaint: {
                    var ctx = getContext("2d");
                    ctx.fillStyle = back_color
                    ctx.strokeStyle = "transparent"
                    ctx.lineWidth = 1

                    ctx.beginPath()
                    ctx.moveTo(0, parent.height / 2)
                    ctx.lineTo(parent.width, 0)
                    ctx.lineTo(parent.width, parent.height)
                    ctx.stroke()
                    ctx.fill()
                }
            }
        }

        Rectangle {
            id: contentRect
            anchors.top: parent.top
            anchors.left: arrow.right
            anchors.right: parent.right
            color: back_color
            radius: 8
            implicitHeight: titleRect.height + promptText.anchors.topMargin + promptText.height + radius * 2

            Rectangle {
                id: titleRect
                implicitHeight: 24
                implicitWidth: parent.width
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.topMargin: parent.radius
                anchors.leftMargin: parent.radius
                anchors.rightMargin: parent.radius
                color: "transparent"

                RowLayout {
                    anchors.fill: parent

                    Rectangle {
                        implicitWidth: 4
                        implicitHeight: 16
                        radius: width / 2
                        color: "#3986FF"
                    }

                    CusText {
                        text: root.title
                        color: "white"
                        font.pixelSize: Theme.font_size_14
                        font.weight: Font.Medium
                    }

                    Item {
                        Layout.fillWidth: true
                    }
                }
            }

            CusText {
                id: promptText
                text: root.description
                color: "white"
                font.pixelSize: Theme.font_size_13
                font.styleName: Theme.font_family_regular
                wrapMode: Text.WordWrap

                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: titleRect.bottom
                anchors.topMargin: parent.radius
                anchors.leftMargin: parent.radius
                anchors.rightMargin: parent.radius
            }
        }
    }
}
